// 引入外部样式表
@import "_vars.scss";
@import "_mixins.scss";
@import "_keyframes";

@font-face {
  font-family: "PuHuiTi";
  src: url("../../fonts/Alibaba-PuHuiTi-Bold.ttf");
  font-weight: 600;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

.banner {
  height: 892px;
  background-image: url("../../imgs/header-background.jpg");
  .navbar {
    display: flex;
    color: white;
    font-weight: 600;
    padding-top: 39px;
    padding-bottom: 39px;
    align-items: center;
    padding-left: 192px;
    img {
      height: 32px;
      margin-right: 600px;
    }
    .menu-lists {
      display: flex;
      font-size: 16px;
      line-height: 32px;
      margin-right: 20px;
      .about {
        position: relative;
        transition: all 1s;
        &:hover .about-content {
          display: block;
        }
        .about-content {
          position: absolute;
          width: 185px;
          height: 115px;
          padding: 15px;
          font-size: 14px;
          display: none;
          transition: all 0.2s ease;
          background-color: $secondly-color;
          hr {
            height: 1px;
            margin: 10px auto 10px auto;
            border: none;
            background-color: #b5bcc4;
            opacity: 0.2;
          }
        }
        &:after {
          display: inline-block;
          margin-left: 0.255em;
          vertical-align: 0.255em;
          content: "";
          border-top: 0.3em solid;
          border-right: 0.3em solid transparent;
          border-bottom: 0;
          border-left: 0.3em solid transparent;
        }
      }
      & > div {
        margin-right: 20px;
        transition: all 0.3s ease;
        &:hover {
          color: $theme-color;
        }
      }
      & > div:last-child {
        margin-right: 5px;
      }
    }
    .icon {
      background-image: url(../../imgs/hexagon-green.svg);
      width: 26px;
      height: 26px;
      background-size: contain;
      margin-right: 15px;
      text-align: center;
      background-repeat: no-repeat;
    }
  }
}
/* 没有固定宽高的元素的背景图片不会加载 */
